<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>扫码登录</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
{% include 'base/cssJs.html.twig' %}
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.qrcode.min.js"></script>
<style type="text/css">
html {
    background-color: #393D49;
}
#login_box {
    position: absolute;
    width: 350px;
    height: 424px;
    margin-left: -175px;
    margin-top: -212px;
    left: 50%;
    top: 50%;
}
#qrBox {
    position: relative;
    text-align: center;
}
.invalid {
    position: absolute;
    text-align: center;
    background-color: white;
    border: 5px solid grey;
    color: grey;
    font-size: 16px;
    width: 140px;
    height: 140px;
    line-height: 140px;
    left: 50px;
    top: 50px;
    user-select: none;
}
#notice {
    text-align: center;
    color: black;
    font-size: 16px;
}
#refresh {
    text-align: center;
    cursor: pointer;
    color: blue;
    font-size: 16px;
    display: none;
}
</style>
</head>
<body>
<div class="layui-card" id="login_box">
    <div class="layui-card-header layui-bg-green">智能管理系统</div>
    <div class="layui-card-body" style="padding:50px;">
        <div id="qrBox"></div>
        <div id="notice">请扫描屏幕上的二维码</div>
        <div id="refresh">刷新二维码</div>
    </div>
</div>
<script type="text/javascript">
layui.use(["layer", "cookies"], function(layer, cookies){
    function makeQr()
    {
        $("#qrBox").html("");
        $("#notice").show();
        $("#refresh").hide();
        $.post("/Api/QrLogin/getName", function(response){
            var data = response.data;
            name = data.name;
            var text = {
                login: 1,
                type: "admin_login",
                device: "admin",
                name: data.name,
                report_url: data.report_url
            };
            var config = {
                width: 250,
                height: 250,
                text: JSON.stringify(text)
            };
            $("#qrBox").qrcode(config);
            query();
        });
    }

    function query()
    {
        var parameter = {
            name: name
        };
        $.post("/Api/QrLogin/query", parameter, function(response){
            var data = response.data;
            var action = data.action;
            if(action == "refresh"){
                $("#qrBox").append('<div class="invalid">二维码已失效</div>');
                $("#notice").hide();
                $("#refresh").show();
                layer.close(msgId);
                msgId = 0;
            }
            else if(action == "query"){
                setTimeout(query, 1000);
            }
            else if(action == "scan"){
                setTimeout(query, 1000);
                if(!msgId){
                    msgId = layer.alert('扫码成功，请在手机上确认登录', {closeBtn: 0}, function(){
                        layer.close(msgId);
                        msgId = 0;
                    });
                }
            }
            else if(action == "write"){
                layer.msg("登录成功", {icon: 1}, function(){
                    cookies.setItem("token", data.value, null, "/");
                    window.location.href = "/Admin/Home/selectUser";
                });
            }
        });
    }

    var name = "";
    var msgId = 0;

    $(function(){
        makeQr();
        $("#refresh").click(function(){
            makeQr();
        });
    });
});
</script>
</body>
</html>